<template>
	<view style="height: 100vh;">
		<view class="nav">
			<view class="flex_between" style="padding-left: 30%;">
				<view class="nav_title">
					<view :class="{'active':isActive==1}" @click="chenked(1)">
						待缴费
					</view>
				</view>
				<view class="nav_title">
					<view :class="{'active':isActive==2}" @click="chenked(2)">
						已缴费
					</view>
				</view>
			</view>
		</view>
		<!-- 待缴费 -->
		<view v-if="isActive==1">
			<view class="unpayment_block" v-for="(item,index) in unpayList" :key="index" @click="fnPay(item)">
				<view class="unpayment_line">
					<view>缴费单:</view>
					<view v-if="item.payOrder != null">【{{collectionLabel(item.ruleType)}}】{{item.payOrder}}</view>
					<view v-else>【{{collectionLabel(item.ruleType)}}】</view>
				</view>
				<view class="unpayment_line">
					<view>缴费金额:</view>
					<view style="color:red" v-if="item.unpaid != null">￥{{item.unpaid}}</view>
				</view>
				<view class="unpayment_line">
					<view>账单时间:</view>
					<view>{{item.createTime}}</view>
				</view>
			</view>
		</view>
		<!-- 已缴费 -->
		<view v-if="isActive==2">
			<view class="payment_block" v-for="(item,index) in payedList" :key="index">
				<view class="payment_line">
					<view>缴费单:</view>
					<view v-if="item.payOrder != null">【{{collectionLabel(item.ruleType)}}】{{item.payOrder}}</view>
					<view v-else>【{{collectionLabel(item.ruleType)}}】</view>
				</view>
				<view class="payment_line">
					<view>缴费金额:</view>
					<view>￥{{item.pay}}</view>
				</view>
				<view class="payment_line">
					<view>账单时间:</view>
					<view>{{item.createTime}}</view>
				</view>
			</view>
		</view>

		<!-- 支付弹出框 -->
		<uni-popup class="finish-popup" ref="popup" type="center" @change="sum=0">
			<view class="popup-box">
				<view style="font-weight: bold;font-size: 16px;">确认支付</view>
				<view class="property_line" style="width: 81%;margin-top: 10px;">
					<view>订单号:</view>
					<view style="color: grey;">日期：2021/08/06</view>
				</view>
				<view class="pay_pop">
					<view class="property_line" v-for="(item,index) in checkedPayList" :key="index">
						<view v-if="item.payOrder != null">【{{collectionLabel(item.ruleType)}}】{{item.payOrder}}</view>
						<view v-else>【{{collectionLabel(item.ruleType)}}】</view>
						<view style="color: red;" v-if="item.unpaid != null">￥ {{item.unpaid}}</view>
					</view>
				</view>
				<view class="property_line" style="width: 81%;margin-top: 10px;">
					<view>总计</view>
					<view style="color: red;">￥ {{sum}}</view>
				</view>
				<button type="default" @click="fnConfirmPay">确认支付</button>
			</view>
		</uni-popup>
	</view>
</template>

<script>
	import {
		listPayRecord,
		updatePayRecord
	} from '@/common/js/api/payRecord.js';

	import {
		payOrder,
		payMent,
		payResult
	} from '@/common/js/api/pay.js';

	import {
		selectDictLabel
	} from '@/common/js/utils/project.js';
	import {
		getDicts
	} from '@/common/js/api/dict/data.js'

	export default {
		data() {
			return {
				isActive: 1,
				//已缴费列表
				payedList: [],
				//待缴费列表
				unpayList: [],
				sum: 0,
				//确认支付列表
				checkedPayList: [],
				userInfo: [],
				WxPayInfo: {
					userId: '',
					payAmount: '',
					outTradeNo: ''
				},
				//缴费类型字典
				typeOptions: [],

			}
		},
		onLoad() {
			this.getDictList()
			this.getPayRecord()
		},
		methods: {
			chenked(type) {
				this.isActive = type
			},
			//获取字典详情
			getDictList() {
				getDicts('t_rule_type').then(res => {
					this.typeOptions = res.data
				})
			},
			//确认支付
			fnConfirmPay() {
				this.WxPayInfo.payAmount = this.sum
				this.WxPayInfo.userId = this.userInfo.userId
				payOrder(this.WxPayInfo).then(res => {
					if (res.code === 200) {
						this.fnPayMent(res)
					}
				})
			},
			//唤起支付
			fnPayMent(query) {
				//唤起支付界面
				payMent(query)
				//轮询支付结果
				this.WxPayInfo.outTradeNo = query.data.out_trade_no
				let that = this
				var timer = setInterval(function() {
					console.log(query);
					payResult(that.WxPayInfo).then(res => {
						if (res.code === 200) {
							console.log(res);
							if (res.msg === "SUCCESS") {
								clearInterval(timer);
								//支付成功，业务操作
								that.updatePay()
							} else if (res.msg === "FAIL") {
								clearInterval(timer);
								uni.showToast({
									title: '支付失败',
									mask: true,
									icon: "error",
									duration: 2000,
								});
							}
						}
					})
				}, 500);
				//3分钟关闭轮询
				setTimeout(function() {
					clearInterval(timer);
				}, 180000);
			},
			collectionLabel(e) {
				return selectDictLabel(this.typeOptions, e)
			},
			//支付成功、修改支付数据
			updatePay() {
				let Things = this.checkedPayList
				for (var i = 0; i < Things.length; i++) {
					Things[i].payStatus = 0
					updatePayRecord(Things[i])
				}
				let that = this
				uni.showToast({
					title: '支付完成',
					duration: 2000,
					success: function() {
						setTimeout(function() {
							//要延时执行的代码
							that.refresh()
						}, 3000) //延迟时间
					},
				});
			},

			//刷新页面
			refresh() {
				this.isActive = 2
				this.$refs.popup.close()
				this.getPayRecord()
			},

			fnPay(data) {
				let arr = []
				arr.push(data)
				this.checkedPayList = arr
				this.$nextTick(function() {
					this.$refs.popup.open()
					arr.forEach(item => {
						this.sum += item.unpaid
					})
				})
			},
			//获取缴费记录
			getPayRecord() {
				this.payedList = []
				this.unpayList = []
				this.userInfo = uni.getStorageSync("userInfo")
				let userId = this.userInfo.sysUser.userId
				let param = {
					'userId': userId
				}
				listPayRecord(param).then(res => {
					let totalList = res.rows
					console.log(totalList)
					for (let i in totalList) {
						if (totalList[i].payStatus == 2) {
							this.unpayList.push(totalList[i])
						} else {
							this.payedList.push(totalList[i])
						}
					}
				})
			}
		}
	}
</script>

<style lang="scss" scoped>
	.popup-box {
		padding-top: 20px;
		text-align: center;
		background-color: #fff;
		border-radius: 10rpx;
		font-size: 28rpx;
		width: 80vw;
		height: 50vh;

		.property_line {
			display: flex;
			justify-content: space-between;
			font-size: 12px;
			line-height: 30px;
			width: 90%;
			margin: auto;
		}

		//button样式
		button {
			width: 90%;
			color: white;
			background-color: #1884eb;
			margin-top: 5%;
			position: absolute;
			bottom: 15px;
			left: 5%;
		}
	}

	.pay_pop {
		height: 30%;
		border-bottom: medium dotted #d2d2d2;
		width: 95%;
		margin: auto;
		overflow-y: scroll;
		padding-bottom: 10px;
	}

	.payment_block,
	.unpayment_block {
		height: 70px;
		margin-top: 10px;
		margin-bottom: 10px;
		background: white;
		padding: 20px;

		.payment_line,
		.unpayment_line {
			display: flex;
			justify-content: space-between;
			font-size: 12px;
			color: #999;
			line-height: 25px;
		}
	}



	.nav {
		background: white;

		.flex_between {
			display: flex;

			.nav_title {
				width: 150upx;
				margin-top: 10px;
				height: 70rpx;
				line-height: 70rpx;
				text-align: center;
				font-size: 28rpx;
				font-family: "PingFang";
				font-weight: bold;
				color: #999;
			}
		}
	}

	.nav_item {
		margin: auto;
		width: 94%;
		border-bottom: 1px solid #eeeeee;
		background: white;
		padding-bottom: 10px;
		margin-top: 20px;
	}

	.active {
		position: relative;
		color: #1884eb;
	}

	.active::after {
		content: "";
		position: absolute;
		width: 40rpx;
		border-radius: 10upx;
		height: 8rpx;
		background-color: #0a73d5;
		left: 0px;
		right: 0px;
		bottom: 0px;
		margin: auto;

	}
</style>
